<template>
  <div class="latest-alarm w100 common-container">
    <el-table :data='listData' :fit="true" :row-style="getRowClass" :header-row-style="getHeadRowClass">
      <el-table-column prop="index" label="序号"></el-table-column>
      <el-table-column prop="fireplugId" label="消防栓编号"></el-table-column>
      <el-table-column prop="type" label="报警类型" :formatter="typeFormatter"></el-table-column>
      <el-table-column prop="province" label="设备位置" :formatter="roleFormatter"></el-table-column>
    </el-table>
  </div>
</template>

<script>
  import Config from '../../config'
  import { mapGetters } from 'vuex'
  // import {regionDataPlus} from 'element-china-area-data'
  import {regionDataPlus} from 'static/js/regionData'
  export default {
    name: 'LatestAlarm',
    props: {

    },
    data () {
      // 报警类型
      const LOW_WATER = '低水压报警' // 0
      const HIGH_WATER = '高水压报警' // 1
      const LOW_VOLT = '低电量报警' // 2
      const map = new Map()
      map.set(0, LOW_WATER)
      map.set(1, HIGH_WATER)
      map.set(2, LOW_VOLT)
      return {
        alarmType: map,
        tableHead: [
          {prop: 'index', label: '序号'},
          {prop: 'fireplugId', label: '消防栓编号'},
          {prop: 'type', label: '报警类型'},
          {prop: 'province', label: '设备位置'}
        ],
        // 表格数据
        listData: [],
      }
    },
    computed: {
      ...mapGetters('user', {
        district: 'getDistrict',
        role: 'getRole'
      })
    },
    mounted () {
      this.getLatestAlarm()
    },
    methods: {
      /**
       * 获取最新的1报警
       * */
      getLatestAlarm () {
        const SIZE = 8 // 条数
        const url = `${Config.FIREPLUG_APP_URL}/fireplug/alarm/search?page=0&size=${SIZE}`;
        let param = {
          latest: true
        };
        param = this.preHandleParam(param)

        if (this.role[0].sort === 93) {
          param.site_type = 'test'
        }else if (this.role[0].sort !== 100) {
          param.site_type = 'official'
        }
        console.log('param ', param)
        this.$http.post(url, param)
          .then(data => {
            this.listData.splice(0)
            this.listData = data.content
            this.listData.forEach((item, index) => {
              this.$set(item, 'index', index)
            })
            console.log('data ', data)
            this.$emit('update', this.listData)
            this.loading = false
          })
          .catch(e => this.loading = false);
      },
      /**
       * 预处理查询参数
       * @param {JSON} param
       * */
      preHandleParam (param) {
        const province = this.district.provinceCode || ''
        const city = this.district.cityCode || ''
        const district = this.district.areaCode || ''
        const site_id = this.district.districtId || ''
        if (district) { // 包含区编码,角色为场所管理员
          if (site_id) {
            param = {...param, ...{site_id}}
          }
        } else {
          if (city) { // 包含市编码
            param = {...param, ...{city}}
          } else {
            if (province) { // 包含省编码
              param = {...param, ...{province}}
            }
          }
        }
        return param
      },
      /**
       * 表头添加背景颜色
       * */
      getRowClass({ row, column, rowIndex, columnIndex }) {
        let style = 'color: #12CEFF;fontSize: 12px;'
        if (rowIndex % 2 === 0) {
          return style += 'background: rgba(26, 77, 159, 0)'
        } else {
          return style += 'background: rgba(26, 77, 159, 0.2)'
        }
      },
      getHeadRowClass () {
        let style = 'color: #12CEFF;fontSize: 14px;'
        return style += 'background: rgba(26, 77, 159, 0.2)'
      },
      /**
       * 表格格式化type一列
       * */
      typeFormatter (row, column) {
        return this.alarmType.get(row.type) || ''
      },
      /**
       * 表格格式化roleCode一列
       * */
      roleFormatter (row, column) {
        try {
          const province = this.getAreaObj(regionDataPlus, row.province)
          const city = this.getAreaObj(province.children, row.city)
          const district = this.getAreaObj(city.children, row.district)
          return `${province.label}${city.label}${district.label}`
        } catch (e) {
          return ''
        }
      },
      /**
       * 获取区域信息
       * @param {Array} arr
       * @param {String} value
       * @return {Object} obj
       * */
      getAreaObj (arr, value) {
        let obj = null
        arr.some(item => {
          if (value === item.value) {
            obj = item
            return true
          }
        })
        return obj
      }
    }
  }
</script>

<style lang="scss" scoped>
  .latest-alarm {
    height: 405px;
    box-sizing: border-box;
    padding: 25px;
    .el-table {
      padding: 0;
      width: auto;
    }
    .el-table, .el-table__expanded-cell {
      background-color: transparent;
    }
    & /deep/ .el-table tr th {
      background-color: transparent !important;
    }
    & /deep/ .el-table--enable-row-hover .el-table__body tr:hover>td {
      background-color: rgba(26, 77, 159, 0);
    }
  }
</style>
